<template>
  <div class="main-container">
    <div
      class="main-header"
      :style="{
        backgroundImage: 'url(' + imgurl + ')',
        'background-repeat': 'no-repeat',
        backgroundSize: '100% 100%',
      }"
    >
      <div class="nav-bg">
        <!-- 頂部導航欄 -->
        <!-- <van-nav-bar left-arrow class="nav-bar">
          <template #right>
            <van-icon name="search" size="18" />
          </template>
        </van-nav-bar> -->
        <div class="nav-text">
          <div class="nav-flex">
            <div class="text-left">
              <p class="van-ellipsis">{{ shopdata.name }}</p>
              <span>
                <van-rate
                  v-model="value"
                  readonly
                  allow-half
                  void-color="#eee"
                />{{ shopdata.score }}分</span
              >
              <span>配送約{{ shopdata.deliveryTime }}分鐘</span>
            </div>
            <div class="text-right">
              <img :src="shopdata.avatar" class="avatar" />
            </div>
          </div>
          <van-collapse v-model="activeName" accordion>
              <van-collapse-item title="公告" name="1" >
                <p>{{shopdata.bulletin}}</p>
              </van-collapse-item>
            </van-collapse>
          <div class="nav-tips">
           
          </div>
        </div>
        <!-- 公告 -->
      </div>
    </div>

    <div class="main-body">
      <div class="main-nav">
        <van-tabs color="#FCC541" v-model="active">
          <van-tab title="商品" to="/main/goods"></van-tab>
          <van-tab title="评价" to="/main/evaluate"></van-tab>
          <van-tab title="商家" to="/main/merchant"></van-tab>
        </van-tabs>
      </div>
      <!-- 二级路由的出口 -->
      <router-view />
    </div>

    <!-- 底部的黑条 -->
    <div class="main-footer"></div>
  </div>
</template>

<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
import { $_seller } from "@/api/order";

//商家数据约束
interface IShopdata {
  avatar?: string; //头像
  bulletin?: string; //店铺公告
  date?: Array<string>; //营业时间
  deliveryPrice?: number; //配送价格
  deliveryTime?: number; //配送时间
  description?: string; //配送方描述
  id?: number; //店铺id
  minPrice?: number; //最小配送费
  name?: string; //店铺名称
  pics?: Array<string>; //店铺图片墙
  score?: number; //评分
  sellCount?: number; //销售数量
  supports?: Array<string>; //目前的活动
}

@Component
export default class Main extends Vue {
  imgurl: unknown = "";
  value: unknown = 0;
  show: boolean = false;
  activeName:string[]=['1']
  active: number = 0; //选项卡激活的索引
  shopdata: IShopdata = {}; //当前店铺数据,标准格式

  // methods
  showPopup(): void {
    this.show = true;
  }

  // 生命周期
  created(): void {
    $_seller().then((res) => {
      this.shopdata = res.data.data; //这里注意，TS的数据对象应该使用interface进行属性约束
      this.value = res.data.data.score;
      this.imgurl = res.data.data.avatar;
      console.log(res);
    });
  }
}
</script>

<style scoped lang="scss">
.main-container {
  height: 100%;
  .main-header {
    height: 220px;
    display: flex;
    justify-content: flex-end;
    flex-flow: column;
    .nav-bg {
      // overflow: hidden;
      .nav-text {
        height: 150px;
        width: 100%;
        background-color: #fcc541;
        border-top-left-radius: 15px;
        border-top-right-radius: 15px;
        .nav-flex {
          display: flex;
          justify-content: space-evenly;
        }
        .text-left {
          width: 70%;
          p {
            font-size: 1.4em;
          }
        }
        .text-right {
          text-align: center;
          .avatar {
            width: 80px;
            height: 80px;
            border-radius: 5px;
          }
        }
      }
    }
  }

  .main-body {
    height: 100%;
    display: flex;
    flex-direction: column;
  }

  .main-footer {
    position: fixed;
    width: 100%;
    height: 60px;
    background-color: #000;
    border-radius: 35px;
    bottom: 10px;
  }
}
</style>